<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>06_component_refs_event</title>
</head>
<body>
<br>
  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
      3. 当第2个输入框失去焦点时, 提示这个输入框中的值
   */

    class MyComponent extends React.Component {

      hint = () => {
        // alert('hint()')
        // console.log('hint()', this)
        alert(this.refs.content.value)
      }

      render () {
        return (
          <div>
            <input type="text" ref="content"/>  &nbsp;
            <button onClick={this.hint}>提示</button>&nbsp;
            <input type="text" />  
          </div>
        )
      }
    }

    ReactDOM.render(<MyComponent/>, document.getElementById('example'))
  </script>
</body>
</html>
